.page-preview{
    height:150px;background-repeat:no-repeat;background-size:contain;background-position: center;
}
.bgtransparent{
    background-image: url(/img/transparent.svg);
    background-size: 30px;
    background-color: #ccc!important;
}
.fs-7{font-size:0.8rem!important}
.fs-8{font-size:0.5rem!important}
.btn-xs{padding: .125rem .25rem;font-size: .475rem;line-height: 1.5;border-radius: .1rem;}

/*模拟器*/
.simulate-border:before{
    content: '';
    position: absolute;
    top: 23px;
    left: 50%;
    transform: translateX(-50%);
    width: 68px;
    height: 10px;
    border: 1px solid #EAEAEA;
    background-color: #fff;
    border-radius: 10px;
}
.simulate-border{
    border: 1px solid #EAEAEA;
    padding: 57px 16px 80px 16px;
    border-radius: 30px;
    position: relative;
    background: #efefef;
    height: calc(100vh - 90px);
}
.simulate-border iframe{
    border: 1px solid #EAEAEA;
}
.simulate-border:after{
    content: '';
    position: absolute;
    background-color: #fff;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 47px;
    height: 47px;
    border: 1px solid #EAEAEA;
    border-radius: 50%;
}

@keyframes gradient-bg {
    0%{
        background-position: 0% 0%;
    }
    50%{
        background-position: 100% 100%;
    }
    100%{
        background-position: 0% 0%;
    }
}
.linear-gradient-bg{
    background-size: 150% 150%;
    background-image: linear-gradient(270deg, rgba(255,255,255, 0.01), rgba(255,255,255, 1) 85%),
    radial-gradient(ellipse at top left, rgba(0,0,0255, 0.75), transparent 80%),
    radial-gradient(ellipse at top right, rgba(255,0,0, 0.75), transparent 80%),
    radial-gradient(ellipse at center right, rgba(0,255,0, 0.75), transparent 80%),
    radial-gradient(ellipse at center left, rgba(0,0,255, 0.75), transparent 80%);
    animation: gradient-bg 10s 0s ease infinite;
}
